<template>
  <div id="toolBar" v-bind="$attrs">
    <div class="curdBox">
      <el-button
        type="primary"
        v-if="toolBarAddBTN"
        icon="el-icon-add"
        :disabled="add"
        :size="size"
        @click="$emit('add')"
        >新增</el-button
      >
      <el-button
        type="success"
        icon="el-icon-edit"
        v-if="toolBarEditBTN"
        :disabled="!(checkedRow.length == 1)"
        @click="$emit('edit', checkedRow[0])"
        :size="size"
        >修改</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        v-if="toolBarDelBTN"
        :disabled="!checkedRow.length"
        :size="size"
        @click="$emit('del', checkedRow)"
        >删除</el-button
      >
      <el-button
        type="info"
        icon="el-icon-download"
        :disabled="download"
        :size="size"
        @click="downloadHandle"
        >导出</el-button
      >
    </div>
    <el-button-group>
      <el-button
        icon="el-icon-search"
        @click="toggleSearch"
        :size="size"
        v-if="$parent.searchBtn"
      ></el-button>
      <el-button
        icon="el-icon-refresh-left"
        @click="refreshHandle"
        :size="size"
      ></el-button>
      <el-popover placement="bottom" width="200" trigger="click">
        <el-tree
          :data="menu"
          show-checkbox
          default-expand-all
          node-key="id"
          :default-checked-keys="defaultCheckedKeys"
          @check-change="nodeClickEvent"
        ></el-tree>
        <el-button
          icon="el-icon-menu"
          :size="size"
          slot="reference"
        ></el-button>
      </el-popover>
    </el-button-group>
  </div>
</template>

<script>
export default {
  props: {
    tableColumnConfig: {
      type: Array
    },
    checkedRow: {
      type: Array
    },
    dataList: {
      type: Array
    },
    toolBarAddBTN: {
      type: Boolean,
      default: () => true
    },
    toolBarEditBTN: {
      type: Boolean,
      default: () => true
    },
    toolBarDelBTN: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      size: "mini",
      add: false,
      edit: true,
      del: true,
      download: false,
      menu: [
        {
          id: 0,
          label: "全部",
          prop: "all",
          show: true,
          children: this.tableColumnConfig
        }
      ]
    };
  },
  computed: {
    defaultCheckedKeys() {
      const result = [];
      function getKey(arr) {
        arr.forEach(item => {
          if (item.show) {
            result.push(item.id);
          }
          if (item.children) {
            getKey(item.children);
          }
        });
      }
      getKey(this.tableColumnConfig);
      return result;
    },
  },
  methods: {
    // 配置列表列
    nodeClickEvent(node, status) {
      console.log(node.id, status);
      this.tableColumnConfig.forEach(item => {
        item.id == node.id ? (item.show = status) : "";
      });
    },
    // 切换显示搜索栏
    toggleSearch() {
      this.$parent.toolQueryVisiable = !this.$parent.toolQueryVisiable;
    },
    // 刷新
    refreshHandle() {
      this.$parent.initData();
    },
    // 导出当前页全部
    downloadHandle() {
      console.log("导出");
      import("@/vendor/Export2Excel").then(excel => {
        const header = [],
          keys = [];
        this.tableColumnConfig.forEach(item => {
          header.push(item.label);
          keys.push(item.prop);
        });
        const data = this.dataList.map(item => keys.map(h => item[h]));
        excel.export_json_to_excel({
          header,
          data,
          filename: "导出",
          autoWidth: true,
          bookType: "xlsx"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#toolBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.el-tree ::v-deep .el-tree-node__content {
  padding-left: 0 !important;
}
</style>
